<template>
    <div class="workbench">
        <div class="md:flex">

            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <template #header>
                    <div>
                        <span class="card-title">今日数据</span>
                        <span class="text-tx-secondary text-xs ml-4">
                            更新时间：{{ workbenchData.today.time }}
                        </span>
                    </div>
                </template>

                <div class="flex flex-wrap">


                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">机构</div>
                        <div class="text-6xl">
                            {{ workbenchData.today.today_new_user }}
                        </div>
                        <div class="text-tx-secondary text-xs">
                            总数：{{ workbenchData.today.total_new_user }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">老师</div>
                        <div class="text-6xl">
                            {{ workbenchData.today.today_new_tea }}
                        </div>
                        <div class="text-tx-secondary text-xs">
                            总数：{{ workbenchData.today.total_new_tea }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">学生</div>
                        <div class="text-6xl">
                            {{ workbenchData.today.today_new_stu }}
                        </div>
                        <div class="text-tx-secondary text-xs">
                            总数：{{ workbenchData.today.total_new_stu }}
                        </div>
                    </div>


                </div>
            </el-card>
        </div>


    </div>
</template>

<script lang="ts" setup name="workbench">
import { reactive, onMounted } from "vue";
import { getWorkbench, check_php_version } from "@/api/app";
import vCharts from "vue-echarts";
import { ElMessage, ElNotification } from "element-plus";
import { getAppList } from "@/api/cloudupdate";

import cache from "@/utils/cache";
import { useRouter } from "vue-router";
import {

    apiInstallappDelete,
    getAppPlugsList,
    installAppPlugs,
    installLocationApp
} from "@/api/installapp";
// 定义响应式数据
const workbenchData: any = reactive({

    wechat_official_account: "",
    wechat_or_code: "",
    support: [],
    today: {}, // 今日数据
    menu: [], // 常用功能
    visitor: [], // 访问量
    article: [], // 文章阅读量
    visitorOption: {
        xAxis: {
            type: "category",
            data: [0],
        },
        yAxis: {
            type: "value",
        },
        legend: {
            data: ["访问量"],
        },
        itemStyle: {
            color: "red",
        },
        tooltip: {
            trigger: "axis",
        },
        series: [
            {
                name: "访问量",
                data: [0],
                type: "line",
                smooth: true,
            },
        ],
    },
});
const formData = reactive({
    account: "",
    site_id: "",
    ip: "",
    domain: "",
    authorization_time: "",
    authorization_status: "",
});

const router = useRouter();

// 获取数据函数
const getData = () => {

    getWorkbench()
        .then((res: any) => {
            workbenchData.version = res.version;
            if (workbenchData.version.new_version) {
                ElMessage({
                    message: "有新版本",
                    type: "success",
                });
            }
            workbenchData.today = res.today;
            workbenchData.menu = res.menu;
            workbenchData.visitor = res.visitor;
            workbenchData.support = res.support;

            // 清空并写入 ECharts 数据
            workbenchData.visitorOption.xAxis.data = [];
            workbenchData.visitorOption.series[0].data = [];
            res.visitor.date.reverse().forEach((item: any) => {
                workbenchData.visitorOption.xAxis.data.push(item);
            });
            res.visitor.list[0].data.forEach((item: any) => {
                workbenchData.visitorOption.series[0].data.push(item);
            });
            workbenchData.wechat_official_account = res.customer_service.wechat_official_account;
            workbenchData.wechat_or_code = res.customer_service.wechat_or_code;

        })
        .catch((err: any) => {
            console.log("err", err);
        });

};



// 检查更新：若存在新版本，则弹出通知，点击后跳转到更新页面
const checkForUpdates = () => {

    let notificationInstance: any;

    notificationInstance = ElNotification({
        title: '应用更新提示',
        message: `检测到有应用发布了新版本 , 点击此处查看更新详情`,
        position: 'top-right',
        duration: 10000, // 10秒
        type: 'warning',
        onClick: () => {
            notificationInstance.close();
            router.push({ path: '/application/package' });
        }
    });



};
// 查询条件
const queryParams = reactive({
    name: "",
    create_time: "",
    uninstall_time: "",
    act: 1
});
const appListThird = ref<any[]>([]);
const allAppList = ref<any[]>([]);
const allAppListFormat = ref<any[]>([]);
const appListSecond = ref<any[]>([]);
const upload = async (appListSecond: any, fileurl: any) => {
    await installLocationApp({ app: appListSecond, fileurl: fileurl })
}

onMounted(() => {
    getData();

});
</script>

<style lang="scss" scoped>
.elbadge-item {
    :deep(.el-badge__content) {
        top: 8px;
        right: 0;
    }
}
</style>
